<template>
  <div class="personalUserInfo">
    <!-- 顶部插槽 -->
    <el-row>
      <el-col :span="19" :offset="5">
        <slot name="top" />
      </el-col>
    </el-row>

    <!-- 个人信息 -->
    <el-form ref="refPersonalUserInfo" :model="insideUserData" :rules="personalUserInfoVO_Rules" label-width="120px">
      <el-row>
        <!-- 个人头像图片 -->
        <el-col :span="5">
          <div class="personalUserInfo_img_wrap">
            <el-form-item label-width="20px" align="center" prop="imagePath">
              <el-input v-show="false" v-model.trim="insideUserData.imagePath" />
              <el-dialog class="gl_dialog_TitleLine" width="880px" title="上传图片" :append-to-body="true" :visible.sync="photoCropperVisible" :close-on-click-modal="false" :close-on-press-escape="false">
                <photo-cropper ref="photoCropper" :photograph="photograph" :action="action" :option="photoCropperOption" height="375px" @photoCropperSave="photoCropperSave" />
              </el-dialog>
              <div class="upload_game_img" :class="isCheckMode('imagePath') ? '' : 'no_pointer'" @click="openPhotoCropper">
                <img v-if="insideUserData.imagePath" class="show_img" :src="getStaticPhotoUrl(insideUserData.imagePath)">
                <i v-else class="el-icon-plus" />
              </div>
            </el-form-item>
          </div>
          <div v-if="isCheckMode('imagePath')">
            <p class="tip_info_style">请上传近期彩色免冠照片</p>
            <p class="tip_info_style">文件格式：jpg、jpeg、png</p>
            <p class="tip_info_style">照片大小不能超过3M</p>
          </div>
        </el-col>
        <!-- 个人信息 -->
        <el-col :span="19">
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-if="isCheckMode('name')" v-model.trim="insideUserData.name" placeholder="请输入姓名" type="text" size="mini" maxlength="20" />
                <span v-else>{{ insideUserData.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="国籍" prop="nationality">
                <!-- <el-input v-if="isCheckMode('nationality')" v-model.trim="insideUserData.nationality" placeholder="请输入国籍" type="text" size="mini" />
                <span v-else>{{ insideUserData.nationality }}</span> -->
                <el-select v-if="isCheckMode('nationality')" v-model="insideUserData.nationality" placeholder="请选择国籍" filterable size="mini" style="width: 100%" @change="onChangeNationality">
                  <el-option v-for="item in dict.country" :key="item.code" :label="item.value" :value="item.code" />
                </el-select>
                <span v-else>{{ findDictDataByCode('country', insideUserData.nationality).value }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="民族" prop="national">
                <el-select v-if="isCheckMode('national')" v-model="insideUserData.national" placeholder="请选择民族" size="mini" style="width: 100%">
                  <el-option v-for="item in filterNationDict" :key="item.code" :label="item.value" :value="item.code" />
                </el-select>
                <span v-else>{{ findDictDataByCode('nation', insideUserData.national).value }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="证件类型" prop="idCardTypeCode">
                <el-select v-if="isCheckMode('idCardTypeCode')" v-model="insideUserData.idCardTypeCode" placeholder="请选择证件类型" size="mini" style="width: 100%" @change="clicktypecode">
                  <el-option v-for="item in dict.idCardType" :key="item.code" :label="item.value" :value="item.code" />
                </el-select>
                <span v-else>{{ findDictDataByCode('idCardType', insideUserData.idCardTypeCode).value }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码" prop="idCardNumber" :rules="insideUserData.idCardTypeCode === 'IdCard' ? formRules.idCard : formRules.unIdCard">
                <el-input v-if="isCheckMode('idCardNumber')" v-model.trim="insideUserData.idCardNumber" placeholder="请输入证件号码" type="text" size="mini" maxlength="30" @input="computGenderAndBirth" />
                <span v-else>{{ insideUserData.idCardNumber }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="性别" prop="genderCode">
                <el-select v-if="isCheckMode('genderCode')" v-model="insideUserData.genderCode" placeholder="请选择性别" size="mini" style="width: 100%">
                  <el-option v-for="item in dict.dictGender" :key="item.code" :label="item.value" :value="item.code" />
                </el-select>
                <span v-else>{{ findDictDataByCode('dictGender', insideUserData.genderCode).value }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker v-if="isCheckMode('birthDate')" v-model="insideUserData.birthDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日期" size="mini" :clearable="false" style="width: 100%" />
                <span v-else>{{ insideUserData.birthDate ? insideUserData.birthDate.slice(0, 10) : '' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="phoneNumber" :rules="isPropData ? formRules.requiredPhoneNumber : formRules.unRrequiredPhoneNumber">
                <el-input v-if="isCheckMode('phoneNumber')" v-model.trim="insideUserData.phoneNumber" placeholder="请输入联系人手机号" type="text" size="mini" />
                <span v-else>{{ insideUserData.phoneNumber }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 即将废弃，不在此组件内显示注释掉, ctkCode -> ctaMemberId -->
          <!-- <el-row>
            <el-col :span="8">
              <el-form-item label="中跆协会员号">
                <el-input v-if="isCheckMode('ctkCode')" v-model.trim="insideUserData.ctkCode" maxlength="20" placeholder="请输入中跆协会员号" type="text" size="mini" />
                <span v-else>{{ insideUserData.ctkCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="省跆协会员号">
                <el-input v-if="isCheckMode('ptkCode')" v-model.trim="insideUserData.ptkCode" maxlength="20" placeholder="请输入省跆协会员号" type="text" size="mini" />
                <span v-else>{{ insideUserData.ptkCode }}</span>
              </el-form-item>
            </el-col>
          </el-row> -->

          <el-row>
            <el-col :span="16">
              <el-form-item label="所在地区" prop="provinceCode" :rules="isPropData ? formRules.requiredProvince : formRules.unRequiredProvince">
                <el-cascader v-if="isCheckMode('addressData')" v-model="insideUserData.addressData" size="mini" :options="cache.district" :props="{ value: 'code', label: 'name' }" placeholder="请选择省市区" style="width: 100%;" @change="onChangeAddressData" />
                <span v-else class="form_content" :title="addressDataForCheck">{{ addressDataForCheck }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16" class="reset_address_error">
              <el-form-item label="详细地址" prop="address" :rules="isPropData ? formRules.requiredAddress : formRules.unRequiredAddress">
                <el-input v-if="isCheckMode('address')" v-model.trim="insideUserData.address" type="textarea" :autosize="{ minRows: 2, maxRows: 3}" placeholder="请输入详细地址" size="mini" />
                <span v-else>{{ insideUserData.address }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="紧急联系人">
                <el-input v-if="isCheckMode('emergencyContact')" v-model.trim="insideUserData.emergencyContact" placeholder="请输入紧急联系人" type="text" size="mini" />
                <span v-else>{{ insideUserData.emergencyContact }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急联系方式" prop="emergencyContactPhoneNumber">
                <el-input v-if="isCheckMode('emergencyContactPhoneNumber')" v-model.trim="insideUserData.emergencyContactPhoneNumber" placeholder="请输入紧急联系人联系方式" type="text" size="mini" />
                <span v-else>{{ insideUserData.emergencyContactPhoneNumber }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="与本人关系">
                <el-select v-if="isCheckMode('emergencyContactRelationship')" v-model="insideUserData.emergencyContactRelationship" placeholder="请选择联系人与本人关系" size="mini" style="width: 100%">
                  <el-option v-for="item in dict.dictRelationship" :key="item.code" :label="item.value" :value="item.value" />
                </el-select>
                <span v-else>{{ findDictDataByCode('dictRelationship', insideUserData.emergencyContactRelationship).value }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="isShowTag">
            <el-col :span="24">
              <el-form-item label="身份标签" prop="registerTags">
                <div v-if="isCheckMode('registerTags')">
                  <div v-if="registerTagList.length">
                    <el-checkbox-group v-model="insideUserData.registerTags" size="mini">
                      <el-checkbox v-for="item in registerTagList" :key="item.code" :label="item.code">{{ item.value }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div v-else class="no_tag">
                    暂无可添加的身份标签
                  </div>
                </div>
                <div v-else>
                  <el-tag v-for="item in insideUserData.registerTags" :key="item" size="small" class="gl_mr_5">
                    <span :key="item">{{ findDictDataByCode('registerTagType', item).value }}</span>
                  </el-tag>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 实名认证照片正反面 -->
          <el-row v-if="isShowIdCardImage">
            <el-col :span="24">
              <div class="gl_clear">
                <div v-if="isCheckMode('idCardImage') || insideUserData.idCardImage" class="img_box">
                  <el-form-item label="实名认证" style="width:370px" :prop="insideUserData.idCardTypeCode!='IdCard'?'idCardImage':''">
                    <upload-file
                      v-if="isCheckMode('idCardImage')"
                      ref="uploadFile"
                      class="imgt_upload"
                      :file-name="'证件照正面'"
                      :action="action"
                      :show-file-list="false"
                      :limit="1"
                      file-type="file"
                      format-file=".jpg,.jpeg,.png"
                      :default-file-url="getStaticPhotoUrl(insideUserData.idCardImage)"
                      @uploadSuccess="photoSavePositive"
                    />
                    <div v-else class="imgt_upload no_pointer">
                      <img v-if="insideUserData.idCardImage" class="imgt_upload" :src="getStaticPhotoUrl(insideUserData.idCardImage)">
                    </div>
                  </el-form-item>
                </div>
                <div v-else>
                  <el-form-item label="实名认证" style="width:370px" />
                </div>
                <div v-if="isCheckMode('idCardBackImage') || insideUserData.idCardBackImage" class="img_box">
                  <el-form-item label="" label-width="20px" style="width:260px">
                    <upload-file
                      v-if="isCheckMode('idCardBackImage')"
                      ref="uploadFile"
                      class="imgt_upload"
                      :file-name="'证件照反面'"
                      :action="action"
                      :show-file-list="false"
                      :limit="1"
                      file-type="file"
                      format-file=".jpg,.jpeg,.png"
                      :default-file-url="getStaticPhotoUrl(insideUserData.idCardBackImage)"
                      @uploadSuccess="photoSaveBack"
                    />
                    <div v-else class="imgt_upload no_pointer">
                      <img v-if="insideUserData.idCardBackImage" class="imgt_upload" :src="getStaticPhotoUrl(insideUserData.idCardBackImage)">
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <!-- 底部插槽 -->
    <el-row>
      <el-col :span="19" :offset="5">
        <slot name="bottom" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { CopyData } from '@/lib';
import validator from '@/lib/validate';

import {
  SiSTKWEventsManagementCreateRegisterWithTagsInput
} from '@/lib/form/game/swaggerForm';

import { PersonalUserInfoVO_Rules } from '@/lib/validate/myCenter';

import uploadFile from './uploadFileDialog';
import photoCropper from '@/components/PhotoCropper';

export default {
  name: 'PersonalInfo',
  components: {
    photoCropper,
    uploadFile
  },
  props: {
    // 传入的个人信息数据
    userData: {
      type: Object,
      default() {
        return {};
      }
    },
    // 是否显示证件照正反面图片上传
    isShowIdCardImage: {
      type: Boolean,
      default: true
    },
    // 是否显示身份标签复选框组
    isShowTag: {
      type: Boolean,
      default: false
    },
    // 需要被过滤掉的身份标签列表，被过滤的标签不会显示：如 ['Athlete']
    filterTags: {
      type: Array,
      default() {
        return [];
      }
    },
    // 是否为查看模式，查看模式将把预设好的字段变为不可编辑状态
    isCheck: {
      type: Boolean,
      default: false
    },
    // 默认的查看模式以原型为基准：包括 name, nationality, national, idCardTypeCode, idCardNumber, genderCode, birthDate
    isDefaultCheck: {
      type: Boolean,
      default: false
    },
    // 查看模式字段集合，由调用组件传值决定，示例：['name']
    checkList: {
      type: Array,
      default() {
        return [];
      }
    },
    // 是否校验联系方式、所在地区和详细地址字段
    isPropData: {
      type: Boolean,
      default: false
    },
    // 是否开启拍照
    photograph: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      insideUserData: new SiSTKWEventsManagementCreateRegisterWithTagsInput(),
      personalUserInfoVO_Rules: new PersonalUserInfoVO_Rules(), // 数据验证规则
      photoCropperVisible: false, // 上传图片窗口的显示与隐藏
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      photoCropperOption: {
        img: '',
        autoCropWidth: '200px',
        autoCropHeight: '280px',
        enlarge: 1,
        fixedNumber: [200, 280]
      },
      formRules: {
        idCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkIdNumber(value, '身份证号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        unIdCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ],
        // 必填手机号
        requiredPhoneNumber: [
          { required: true, message: '请输入联系人手机号', trigger: 'change' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        // 非必填手机号
        unRrequiredPhoneNumber: [
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        // 必填详细地址
        requiredAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        // 非必填详细地址
        unRequiredAddress: [],
        // 必填所在地区
        requiredProvince: [
          { required: true, message: '请选择所在地区', trigger: 'change' }
        ],
        // 非必填所在地区
        unRequiredProvince: []
      },
      filterNationDict: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    }),
    // 计算出可被选择的身份标签
    registerTagList () {
      let _returnList = [];
      if (this.isShowTag) {
        const _map = {};
        this.filterTags.forEach(item => {
          _map[item] = true;
        });
        _returnList = this.dict.registerTagType.filter(item => !(item.code in _map));
      } else {
        _returnList = [];
      }
      return _returnList;
    },
    // 显示为只可查看字段的map
    checkListMap () {
      if (this.isDefaultCheck) {
        return {
          name: true,
          nationality: true,
          national: true,
          idCardTypeCode: true,
          idCardNumber: true,
          genderCode: true,
          birthDate: true
        };
      } else {
        const _map = {};
        this.checkList.forEach(item => {
          _map[item] = true;
        });
        return _map;
      }
    },
    // 根据所在地区Code找到对应name
    addressDataForCheck () {
      const _provinceCode = this.insideUserData.provinceCode;
      const _cityCode = this.insideUserData.cityCode;
      const _countyCode = this.insideUserData.countyCode;
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      return `${_provinceData ? _provinceData.name : ''} ${_cityData ? _cityData.name : ''} ${_countyData ? _countyData.name : ''}`;
    }
  },
  watch: {
    userData: {
      immediate: true,
      deep: true,
      handler() {
        this.init();
      }
    },
    'insideUserData.nationality': {
      deep: true,
      immediate: true,
      handler (val) {
        // 中国国籍，民族显示56个民族及外国血统中国人士
        if (val === 'CHN') {
          // 57 表示其他
          this.filterNationDict = this.dict.nation.filter(item => item.code !== '57');
        } else {
          this.filterNationDict = [{ code: '57', value: '其他' }];
        }
      }
    }
  },
  methods: {
    onChangeNationality () {
      this.insideUserData.national = '';
    },
    // 若没有字典信息，外部可直接调用方法获取字典数据
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 初始化数据
    init () {
      CopyData(this.userData, this.insideUserData);
      this.insideUserData.addressData = [this.userData.provinceCode, this.userData.cityCode, this.userData.countyCode];
      if (this.insideUserData.nationality === 'CHN') {
        // 57 表示其他
        this.filterNationDict = this.dict.nation.filter(item => item.code !== '57');
      } else {
        this.filterNationDict = [{ code: '57', value: '其他' }];
      }
      this.$nextTick(() => {
        this.$refs.photoCropper && this.$refs.photoCropper.init();
        this.$refs.refPersonalUserInfo.clearValidate();
      });
    },
    // 外部获取组件数据的方法
    getInsideUserData () {
      return new Promise((reslove, reject) => {
        this.$refs.refPersonalUserInfo.validate((valid) => {
          if (valid) {
            reslove(this.insideUserData);
          } else {
            reject(null);
          }
        });
      });
    },
    // 清空数据及验证
    clearInsideUserData () {
      this.insideUserData = new SiSTKWEventsManagementCreateRegisterWithTagsInput();
      this.$refs.refPersonalUserInfo.resetFields();
    },
    // 字段是否只可查看处理函数
    isCheckMode (key) {
      // 如果 isCheck 存在则以 isCheck 为准
      if (this.isCheck) {
        return !this.isCheck;
      } else {
        return !(key in this.checkListMap);
      }
    },
    // 根据code在相应字典中寻找数据
    findDictDataByCode (dictKey, code) {
      const _dict = this.dict[dictKey];
      if (_dict) {
        return _dict.find(item => item.code === code) || {};
      } else {
        console.log('findDictDataByCode -> findDictDataByCode: ' + dictKey + ', 未找到字典数据.');
        return {};
      }
    },
    // 根据身份证号码计算性别及生日
    computGenderAndBirth () {
      const _idCardNum = this.insideUserData.idCardNumber;
      const _reg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
      // 当证件类型为身份证 且 证件号码不为空 且 通过身份证校验时。自动设置性别和出生日期
      if (_reg.test(_idCardNum)) {
        const _genderNum = _idCardNum.slice(-2, -1);
        this.insideUserData.genderCode = _genderNum % 2 === 0 ? 'W' : 'M';
        this.insideUserData.birthDate = _idCardNum.slice(6, 10) + '-' + _idCardNum.slice(10, 12) + '-' + _idCardNum.slice(12, 14);
      }
    },
    // 更改所在地区，将信息传入需要的Code中
    onChangeAddressData () {
      const _addressData = this.insideUserData.addressData;
      console.log('onChangeAddressData -> _addressData', _addressData);
      this.insideUserData.provinceCode = _addressData ? _addressData[0] || '' : '';
      this.insideUserData.cityCode = _addressData ? _addressData[1] || '' : '';
      this.insideUserData.countyCode = _addressData ? _addressData[2] || '' : '';
    },
    // 点击打开照片裁剪窗口
    openPhotoCropper () {
      const _canEdit = this.isCheckMode('imagePath');
      if (_canEdit) {
        if (this.insideUserData['imagePath']) {
          this.$set(this.photoCropperOption, 'img', this.getStaticPhotoUrl(this.insideUserData['imagePath']));
        }
        this.photoCropperVisible = true;
      }
    },
    // 点击保存照片裁剪窗口
    photoCropperSave (uploadImg) {
      this.$refs.photoCropper.upload().then(res => {
        this.$set(this.insideUserData, 'imagePath', res.tempUrl);
        this.photoCropperVisible = false;
      });
    },
    clicktypecode() {
      this.$refs.refPersonalUserInfo.clearValidate('idCardImage');
      this.$refs.refPersonalUserInfo.clearValidate('idCardBackImage');

    },

    // 获取静态文件
    getStaticPhotoUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    photoSavePositive (fileUrl) {
      this.$set(this.insideUserData, 'idCardImage', fileUrl.tempUrl);
    },
    photoSaveBack (fileUrl) {
      this.$set(this.insideUserData, 'idCardBackImage', fileUrl.tempUrl);
    }
  }
};
</script>

<style>
  .personalUserInfo_img_wrap .el-form-item__error {
    padding-left: 10px;
  }
  .personalUserInfo .el-form-item__error{
    padding-top: 0;
    margin-top: 3px;
  }
  .personalUserInfo .reset_address_error .el-form-item__error {
    margin-top: 2px;
  }
</style>

<style lang="scss" scoped>
  .tip_info_style {
    padding: 0 10px 0 30px;
    font-size: 14px;
    color: #C0C4CC;
  }
  .personal{
    color: #333;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.09);
  }
  .box{
    width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
  }
  .el-form>>>.el-form-item {
    margin-bottom: 15px;
  }
  .el-cascader {
    width: 100%;
  }
  .label {
    text-align: right;
    font-weight: 700;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
  }
  .img_box {
    float: left;
  }
  .imgt_upload {
    width: 240px;
    height: 150px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
  }
  .imgt_upload.no_pointer {
    cursor: default;
  }
  .imgt_upload:hover {
    border-color: #409EFF;
  }
  .img_content {
    width: 240px;
    height: 90px;
    margin-top: 30px;
    text-align: center;
  }
  .imgt-icon {
    font-size: 28px;
    color: #8c939d;
  }
  .imgt {
    width: 240px;
    height: 150px;
    display: block;
  }
  .boxItem_left{
    padding-bottom: 10px;
    width: 70%;
    float: left;
  }
  .boxItem_right{
    width: 30%;
    float: left;
  }
  .no_tag {
    padding-left: 15px;
    color: #C0C4CC;
    font-size: 12px;
  }
  .form_content {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: top;
    text-overflow: ellipsis;
  }
  .upload_game_img.no_pointer {
    cursor: default;
  }
  .upload_game_img {
    width: 150px;
    height: 210px;
    line-height: 205px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin: 10px 0;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: middle;
  }
</style>
